// login.js

import React from 'react';
import { Navigate } from 'react-router-dom';
import { post } from '../utils/request';
import url from '../utils/url';
import './login.css';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user_name: '',
            password: '',
            redirectToReferrer: false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        if (e.target.name === 'user_name') {
            this.setState({
                user_name: e.target.value
            });
        } else if (e.target.name === 'password') {
            this.setState({
                password: e.target.value
            });
        } else {
            // do nothing
        }
    }

    handleSubmit(e) {
        e.preventDefault();

        const user_name = this.state.user_name;
        const password = this.state.password;
        if (user_name.length === 0 || password.length === 0) {
            alert('user_name or password cannot be null!');
            return;
        }
        const params = {
            user_name: user_name,
            password: password
        };
        post(url.login(), params).then(data => {
            if (data.error) {
                alert(data.error.message || 'login failed');
            } else {
                sessionStorage.setItem('user_id', parseInt(data.user_id));
                sessionStorage.setItem('user_name', user_name);
                this.setState({
                    redirectToReferrer: true
                });
            }
        });
    }

    render() {
        // 'from' saves the path to the page before login, and used to redirect to the origin page after login successfully.
        const { from } = this.props.state || { from: {pathname: '/'} };
        const { redirectToReferrer } = this.state;
        // if succeed to login, 'redirectToReferrer' should be 'true', and use 'Redirect' component to redirect the page.
        if (redirectToReferrer) {
            return <Navigate to={from} />;
        }
        return (
            <form className='login' onSubmit={this.handleSubmit}>
                <div>
                    <label>
                        user_name:
                        <input
                            name='user_name'
                            type='text'
                            value={this.state.user_name}
                            onChange={this.handleChange}>
                        </input>
                    </label>
                </div>
                <div>
                    <label>
                        password:
                        <input
                            name='password'
                            type='password'
                            value={this.state.password}
                            onChange={this.handleChange}>
                        </input>
                    </label>
                </div>
                <input type='submit' value='login' />
            </form>
        );
    }
}

export default Login;
